<template>
	<div class="nav-wrap">
		<el-menu
			:default-active="activePath"
			mode="horizontal"
			router
			text-color="#333"
			active-text-color="#6744ac"
		>
			<el-menu-item index="/">首页</el-menu-item>
			<!-- 未登录显示登陆注册 -->
			<!-- {{ $store.state.token }} -->
			<template v-if="!token">
				<el-menu-item index="/signin">登录</el-menu-item>
				<el-menu-item index="/signup">注册</el-menu-item>
			</template>
			<!-- 登陆了显示购物车和退出登录 -->
			<template v-else>
				<el-menu-item index="/cart">购物车</el-menu-item>
				<el-menu-item index="" @click="loginOut">退出登录</el-menu-item>
			</template>
			<!-- {{ activePath }} -->
		</el-menu>

		<!-- <router-link to="/">首页</router-link>
		<router-link to="/signin">登录</router-link>
		<router-link to="/signup">注册</router-link> -->
	</div>
</template>
<script>
import { mapState } from "vuex";
export default {
	name: "NavPart",
	data() {
		return {
			activePath: "/",
		};
	},
	watch: {
		// 侦听路由的变化
		$route(newRoute) {
			// console.log(newRoute);
			this.activePath = newRoute.path;
		},
	},
	created() {
		// 路由信息
		// console.log(this.$route);
		this.activePath = this.$route.path;
	},
	computed: {
		// 将token数据映射到计算属性
		...mapState(["token"]),
	},
	methods: {
		// 退出登录
		loginOut() {
			// 触发mutation退出登录
			this.$store.commit("changeToken", "");
			// 如果当前路由是购物车,强制跳转到首页
			if (this.$route.name == "cart") {
				this.$router.push("/");
			}
		},
	},
};
</script>
<style scoped lang="scss">
// 样式穿透
::v-deep .el-menu.el-menu--horizontal {
	border: none;
}
.el-menu-item {
	font-size: 18px;
}
</style>
